<template>
	<div style="height: 100%;">
		<el-container>
			<el-main>
				<el-tabs type="border-card">
					<!-- 角色列表分页 -->
					<el-tab-pane label="角色列表">
						<!-- 搜索卡片 -->
						<el-card style="margin-bottom: 15px;">
							<el-form :model="roleForm">
								<el-row :gutter="15">
									<el-col :span="8">
										<el-form-item label="角色名称">
											<el-input placeholder="请输入角色名称" v-model="roleForm.roleName"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="7">
										<el-form-item label="角色编码">
											<el-input placeholder="请输入角色编码" v-model="roleForm.rolePerm"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="9">
										<el-form-item label="状态">
											<el-select placeholder="请选择启用状态" v-model="roleForm.enabled">
												<el-option v-for="item in dicts.system_global_status" :key="item.id"
													:label="item.k" :value="item.v"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="15">
									<el-col :span="8">
										<el-form-item>
											<el-button icon="search" type="primary" @click="searchRole">搜索</el-button>
											<el-button icon="refreshLeft" @click="resetRole">重置</el-button>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</el-card>
						<!-- 列表卡片 -->
						<el-card>
							<el-button icon="plus" type="primary" style="margin-bottom: 10px;"
								@click="addRole">新增</el-button>
							<el-table :data="tableData" border>
								<el-table-column type="selection" align="center"></el-table-column>
								<el-table-column label="角色名称" align="center" prop="roleName"></el-table-column>
								<el-table-column label="权限字符" align="center" prop="rolePerm"></el-table-column>
								<el-table-column label="是否启用" align="center">
									<template #="{ row }">
										<el-tag :type="row.enabled ? '' : 'danger'">
											{{ dicts.system_global_status.find(i => i.v == row.enabled)?.k }}
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column label="创建时间" align="center">
									<template #="{ row }">
										{{ tool.dateFormat(row.createTime) }}
									</template>
								</el-table-column>
								<el-table-column label="操作" align="center" width="220">
									<template #="{ row }">
										<el-link :underline="false" icon="edit" type="primary"
											@click="editRole(row)">编辑</el-link>

										<el-popconfirm :title="`确认要删除${row.roleName}吗？`" @confirm="rmRole(row)">
											<template #reference>
												<el-link :underline="false" icon="delete" type="danger" color="red"
													style="margin: 0 8px;" v-auths="'system:role:delete'">删除</el-link>
											</template>
										</el-popconfirm>

										<el-link :underline="false" type="danger" @click="$router.push('/')">分配用户</el-link>
									</template>
								</el-table-column>
							</el-table>
							<XlxPagination v-model:currentPage="roleForm.current" v-model:pageSize="roleForm.size"
								:total="totals" @update:currentPage="getRolePageData()" @update:pageSize="updateSize">
							</XlxPagination>
						</el-card>
					</el-tab-pane>
					<!-- 回收站分页 -->
					<el-tab-pane label="回收站">回收站</el-tab-pane>
				</el-tabs>
			</el-main>
		</el-container>
		<RoleDialog v-model="dialogVisible" @addRoleSuccess="getRolePageData()" :roleId="roleId"></RoleDialog>
	</div>
</template>

<script setup lang="ts">
import { getRoleDeleteApi, getRolePageApi } from '@renderer/api/role';
import { useDicts } from '@renderer/composables/dicts';
import { Irole, Role } from '@renderer/interface/role';
import { tool } from '@renderer/utils/tool';
import { onMounted, ref } from 'vue';
import RoleDialog from './roleDialog.vue';

/* 搜索卡片 */
const roleForm = ref<Irole>({
	current: 1,
	size: 5,
	roleName: '',
	rolePerm: '',
	enabled: undefined
})
// 点击搜索按钮的回调
const searchRole = () => {
	getRolePageData()
}
// 点击重置按钮的回调
const resetRole = () => {
	roleForm.value = {
		current: 1,
		size: 5,
		roleName: '',
		rolePerm: '',
		enabled: undefined
	}
	getRolePageData()
}

/* 角色列表 */
const tableData = ref<Role[]>([])
const { dicts } = useDicts(['system_global_status'])
const roleId = ref('')
// 新增角色
const dialogVisible = ref(false)
const addRole = () => {
	roleId.value = ''
	dialogVisible.value = true
}
// 删除角色
const rmRole = async (row: Role) => {
	const { code } = await getRoleDeleteApi(row.id)
	if (code !== '200') return

	ElMessage({
		type: 'success',
		message: '删除角色成功~'
	})
	getRolePageData()
}
// 修改角色
const editRole = (row: Role) => {
	roleId.value = row.id
	dialogVisible.value = true
}

/* 分页器组件 */
const totals = ref(0)
const updateSize = () => {
	roleForm.value.current = 1
	getRolePageData()
}

/* 请求角色分页数据 */
const getRolePageData = async () => {
	const { code, data: { total, records } } = await getRolePageApi(roleForm.value)
	if (code === '200') {
		tableData.value = records
		totals.value = total
	}
}

onMounted(() => {
	getRolePageData()
})
</script>

<style scoped></style>